<template>
    <div style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 10px;">
        <div class="progress-container" :style="{backgroundColor: containerColor}" style="width: 90%;display: flex;">
            <el-tooltip v-for="(item, index) in dataList" :key="index" :content="item.title + ': ' + item.width" effect="light">
                <div class="progress-bar" :style="{backgroundColor: item.color, width: getPercentage(item.width) + '%'}" />
            </el-tooltip>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ProgressBar',
    props: {
        dataList: {
            type: Array,
            default: () => []
        },
        percentage: {
            type: [Number, String],
            default: 0
        },
        containerColor: {
            type: String,
            default: 'rgba(79, 104, 232, 0.1)'
        },
        color: {
            type: String,
            default: 'rgba(79, 104, 232, 1)'
        }
    },
    methods: {
        getPercentage(width) {
            if (this.dataList && this.dataList.length > 0) {
                let total = this.dataList.reduce((sum, item) => {
                    return sum + (item.width ? item.width : 0);
                }, 0);
                if (width) {
                    return ((width / total) * 100).toFixed(2);
                } else {
                    return 0;
                }
            } else {
                return 0;
            }
        }
    }
};
</script>

<style scoped>
.progress-container, .progress-bar {
    position: relative;
    height: 12px;
}
.progress-bar {
    transition: all .2s;
    -webkit-transition: all .2s;
    cursor: pointer;
}
.progress-bar:hover {
    height: 15px;
}

.progress-bar__after {
    height: 0;
    width: 0;
    position: absolute;
    bottom: -15px;
    right: -5px;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid transparent;
}
</style>
